Modern user interface toolkits use layout managers to create user interfaces that can be dynamically resized. Layout managers are software components that have the ability to lay out components (sometimes called widgets) by their relative positions without using distance units. It is often more natural to define component layouts in this manner than to define component positions in pixels or common distance units, so a number of popular widget toolkits include this ability by default. Widget toolkits often allow designers to place widgets in layout containers that have particular layout characteristics when the container is rendered. Windows Presentation Foundation (WPF) and Microsoft Silverlight are two examples of toolkits that provide layout managers. Designers describe user interface (UI) components in Extensible Application Markup Language (XAML) and can define UI states and transitions using an Application Programming Interface (API) such as MICROSOFT™ Silverlight or MICROSOFT™ WINDOWS™ Presentation Foundation.
One reason that layout managers are used is to enable automatic resizing of an application, so that UIs can work properly on devices with different display resolutions and with resizable, reconfigurable windows. Layout managers are also good at handling varying sizes/quantities of content. Layout managers are used to automatically determine the layout of graphical elements and controls on a screen. Layout managers typically operate by forcing their children (graphical elements, UI elements) to conform to a certain layout rule. A stack panel, for example, may force its children into a horizontal or vertical stack, controlling only relative position of the objects with respect to each other. As another example, a uniform grid might force objects to be arranged in a grid, with a fixed size for each child. A table-style layout might force children to conform to row and column definitions, and to define position margins to control positioning and size.
For dynamic user interfaces, it is often useful to transition between different layouts of UI components. For example, when a user clicks on a “More” button the designer may want the area of one component to expand and display more UI controls. For usability reasons, designers like transitions to be smooth and allow for detailed control. In some scenarios, it is sufficient to simply fade between two entirely different UI screens, but this technique does not work when a layout of graphical elements or user interface controls is designed to morph smoothly from one layout to another. For example, a designer may want a panel to appear to fly out from the left side after a user logs in to an application. Current animation systems, such as Microsoft Visual State Manager, automatically animate transitions from one state to another. In the previous example, the animation system causes the panel to animate from the left side of the display through several intermediate locations before reaching the final fully displayed location.
User interface animation increases the reality of interacting with objects experienced by users of the interface. For example, folders that animate from one location to another are easier to understand than those that simply disappear and reappear at another location. One type of user interface animation is a “bounce,” which refers to the desirability of an object having some amount of elasticity as it moves from one location to another. For example, a software designer may want an object dragged from one location to another to bounce at the destination as it would if physically dropped. The bounce calls the user's attention to the object's new location and gives the object a more realistic feel, making the interface more pleasing to use.
Many modern applications and systems use motion to explain how information moves from one place to another. Examples include animating the motion of selected items from a master list to a filtered list, animating an application to grow out of its icon when launched, or animating deleted files to a recycle bin. Today, this work is typically done by writing custom code specific to the task. However, as the nature of the animation is highly visual, there is a great need to put the control of the animation in the hands of a visual designer who does not wish to, or even know how to, write code to perform the task.